<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>拾光</title>
	<!-- <meta name="viewport" content=" user-scalable=no">  -->
	<meta name="Resource-type" content="Document" />
	<link rel="shortcut icon" href="favicon.ico" />
	<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
	<link rel="stylesheet" type="text/css" href="animate.css" />
	<script src="jquery.min.js"></script>
	<script type="text/javascript">
		function isPC(){
			var userAgentInfo = navigator.userAgent;
			var Agents = ["Android", "iPhone",
			            "SymbianOS", "Windows Phone"];
			var flag = true;
			for (var v = 0; v < Agents.length; v++) {
			    if (userAgentInfo.indexOf(Agents[v]) > 0) {
			        flag = false;
			        break;
			    }
			}
			return flag;
		}
		var insert="",bottom="";
		if (isPC()==true) {
			document.write('<link rel="stylesheet" type="text/css" href="pc.css" />');
			insert='	<div class="section fp-auto-height" id="section0"><img src="img/logo.png"/><span>轻便，拾光</span><div class="tab"><a href="index.html">首页</a><a href="team.html">拾光团队</a></div></div>';
			bottom='<div class="section fp-auto-height" id="section6" style="height:320px;padding:22px 152px;color:#51c5c4;position:relative;font-size:20px;"><img src="img/logo.png" style="height:100px;"/><span style="vertical-align:top;line-height: 100px;">轻便，拾光</span>			<div style="display:inline-block;position:absolute;text-align:center;color:#495265;font-size:16px;right:152px;margin-top:20px;"><p style="margin:5px 0;">Powered by <span style="cursor:pointer;color:#51c5c4">yantukeji.com</span></p><p style="margin:5px 0;">河北省秦皇岛市海港区</p><p style="margin:5px 0;">冀ICP备15024262号-1</p></div></div>';
		}else{
			document.write('<link rel="stylesheet" type="text/css" href="phone.css" />');
		};
	</script>
	
</head>
<body>
<!-- <ul id="menu">
	<li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
	<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
	<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
</ul> -->
<div id="fullpage">
	<div class="section" id="team-section0">
		<div class="tip">团队简介</div>
		<div class="team-body-left" id="person1">
			<div id="team-img1" class="img" style="background:url(img/dqf.png) no-repeat;background-position:0 0;"></div>
		</div>		
		<div class="team-body-right"  id="jj-div">
			<div class="des-left" >
				<div id="jj" class="iphone">
					<p>Hi，我是拾光团队的leader董奇峰，下面由我来给大家介绍下我们团队的历史。</p>
					<p>2014年10月，沿途工作室由在校大学生为同一个梦想构建而成。一路走来，虽然经历了坎坷，但依然坚持了下来。</p>
					<p>目前团队由9名同学组成，其中设计1人，运营2人，开发6人，其中有两名在校同学。我们来源于学生，服务于学生，立志用互联网技术给每一位大学生带来更加轻快便捷的校园生活。</p>

				</div>				
			</div>
		</div>
	</div>
	<div class="section" id="team-section1">
		<!-- <div class="tip">移动端</div> -->
		<div class="team-body-left" id="person2">
			<div id="team-img2" class="img" style="background:url(img/zjj.png) no-repeat;background-position:0 0;"></div>
			<div class="des-right">
				<h1>朱家君</h1>
				<div class="team-person-des">php后端+Android程序猿</div>				
			</div>

		</div>
		<div class="team-body-right" id="person3">
			<div id="team-img3" class="img" style="background:url(img/xjw.png) no-repeat;background-position:0 0;"></div>
			<div class="des-left">
				<h1>徐基伟</h1>
				<div class="team-person-des">node后端+IOS程序猿</div>				
			</div>
		</div>
	</div>
	<div class="section" id="team-section2">
		<!-- <div class="tip">web前端</div> -->
		<div class="team-body-left" id="person4">
			<div id="team-img4" class="img" style="background:url(img/zl.png) no-repeat;background-position:0 0;"></div>
			<div class="des-right">
				<h1>张陆</h1>
				<div class="team-person-des">web前端程序媛</div>				
			</div>
		</div>
		<div class="team-body-right" id="person5">
			<div id="team-img5" class="img" style="background:url(img/yxj.png) no-repeat;background-position:0 0;"></div>
			<div class="des-left">
				<h1>要笑娟</h1>
				<div class="team-person-des">web前端程序媛</div>				
			</div>
		</div>
	</div>
	<div class="section" id="team-section3">
		<!-- <div class="tip">php后台及设计</div> -->
		<div class="team-body-left" id="person6">
			<div id="team-img6" class="img" style="background:url(img/hbh.png) no-repeat;background-position:0 0;"></div>
			<div class="des-right">
				<h1>黄彬和</h1>
				<div class="team-person-des">php后端程序猿</div>				
			</div>
		</div>
		<div class="team-body-right" id="person7">
			<div id="team-img7" class="img" style="background:url(img/lz.png) no-repeat;background-position:0 0;"></div>
			<div class="des-left">
				<h1>李震</h1>
				<div class="team-person-des">设计师</div>				
			</div>
		</div>
	</div>
	<div class="section" id="team-section4">
		<!-- <div class="tip">运营</div> -->
		<div class="team-body-left" id="person8">
			<div id="team-img8" class="img" style="background:url(img/lxl.png) no-repeat;background-position:0 0;"></div>
			<div class="des-right">
				<h1>刘学丽</h1>
				<div class="team-person-des">运营</div>				
			</div>
		</div>
		<div class="team-body-right" id="person9">
			<div id="team-img9" class="img" style="background:url(img/fxf.png) no-repeat;background-position:0 0;"></div>
			<div class="des-left">
				<h1>伏晓飞</h1>
				<div class="team-person-des">运营</div>				
			</div>

		</div>
		<ul id="menu" style="display:none;">
			<li><a href="#firstPage">返回顶部</a></li>
			<li><a href="index.html">返回首页</a></li>
		</ul>
	</div>
</div>
<script type="text/javascript" src="jquery.fullPage.min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){

		$("#fullpage").prepend(insert);
		$("#fullpage").append(bottom);
		if (isPC()) {
			$("#person1").addClass("animated rotateInDownLeft");
			setTimeout(function(){
				$("#person1").removeClass("animated rotateInDownLeft");
			},2000);
			$("#jj-div").addClass("animated rotateInDownRight");
			setTimeout(function(){
				$("#jj-div").removeClass("animated rotateInDownRight");
			},2000);
			$(".img").hover(function(){
				$(this).css("background-position","0 -500px");
			},function(){
				$(this).css("background-position","0 0");
			})
			$('#fullpage').fullpage({
				navigation: true,
				navigationPosition: 'right',
				navigationTooltips: ['top','leader', '移动端', 'web前端','php后台及设计','运营','bottom'],
				sectionsColor: ['#fff','#40E0D0', '#00BFFF', '#FFC0CB', '#9370DB', '#FFA07A','#fff'],
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage','5thpage','6thpage', 'lastPage'],
				afterLoad: function(anchorLink, index){
					console.log(index);

				},
				'onLeave':function(index, nextIndex, direction){
					if(index==2 || index==4){
						$("#person2").addClass("animated zoomInLeft");
						setTimeout(function(){
							$("#person2").removeClass("animated zoomInLeft");
						},2000);
						$("#person3").addClass("animated zoomInRight");
						setTimeout(function(){
							$("#person3").removeClass("animated zoomInRight");
						},2000);
					}
					if(index==3 || index==5){
						$("#person4").addClass("animated bounceInLeft");
						setTimeout(function(){
							$("#person4").removeClass("animated bounceInLeft");
						},2000);
						$("#person5").addClass("animated bounceInRight");
						setTimeout(function(){
							$("#person5").removeClass("animated bounceInRight");
						},2000);
					}
					if(index==4 || index==6){
						$("#person6").addClass("animated zoomInLeft");
						setTimeout(function(){
							$("#person6").removeClass("animated zoomInLeft");
						},2000);
						$("#person7").addClass("animated zoomInRight");
						setTimeout(function(){
							$("#person7").removeClass("animated zoomInRight");
						},2000);
					}
					if(index==5 || index==7){
						$("#person8").addClass("animated bounceInLeft");
						setTimeout(function(){
							$("#person8").removeClass("animated bounceInLeft");
						},2000);
						$("#person9").addClass("animated bounceInRight");
						setTimeout(function(){
							$("#person9").removeClass("animated bounceInRight");
						},2000);
					}
				}
			});	

		}else{
			$("#person1").addClass("animated rotateInDownLeft");
			setTimeout(function(){
				$("#person1").removeClass("animated rotateInDownLeft");
			},2000);
			$("#jj-div").addClass("animated rotateInDownRight");
			setTimeout(function(){
				$("#jj-div").removeClass("animated rotateInDownRight");
			},2000);
			$('#fullpage').fullpage({
				sectionsColor: ['#40E0D0', '#00BFFF', '#FFC0CB', '#9370DB', '#FFA07A', '#20B2AA'],
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage','5thpage','lastPage'],
				menu: '#menu',
				afterLoad: function(anchorLink, index){
					if (index==5) {$("#menu").show()}else{$("#menu").hide()};
				},
				'onLeave':function(index, nextIndex, direction){
					if(index==0 || index==2){
						$("#person1").addClass("animated rotateInDownLeft");
						setTimeout(function(){
							$("#person1").removeClass("animated rotateInDownLeft");
						},2000);
						$("#jj-div").addClass("animated rotateInDownRight");
						setTimeout(function(){
							$("#jj-div").removeClass("animated rotateInDownRight");
						},2000);
					}
					if(index==1 || index==3){
						$("#person2").addClass("animated zoomInDown");
						setTimeout(function(){
							$("#person2").removeClass("animated zoomInDown");
						},2000);
						$("#person3").addClass("animated zoomInUp");
						setTimeout(function(){
							$("#person3").removeClass("animated zoomInUp");
						},2000);
					}
					if(index==2 || index==4){
						$("#person4").addClass("animated bounceInDown");
						setTimeout(function(){
							$("#person4").removeClass("animated bounceInDown");
						},2000);
						$("#person5").addClass("animated bounceInUp");
						setTimeout(function(){
							$("#person5").removeClass("animated bounceInUp");
						},2000);
					}
					if(index==3 || index==5){
						$("#person6").addClass("animated zoomInDown");
						setTimeout(function(){
							$("#person6").removeClass("animated zoomInDown");
						},2000);
						$("#person7").addClass("animated zoomInUp");
						setTimeout(function(){
							$("#person7").removeClass("animated zoomInUp");
						},2000);
					}
					if(index==4 || index==6){
						$("#person8").addClass("animated bounceInDown");
						setTimeout(function(){
							$("#person8").removeClass("animated bounceInDown");
						},2000);
						$("#person9").addClass("animated bounceInUp");
						setTimeout(function(){
							$("#person9").removeClass("animated bounceInUp");
						},2000);
					}
				}
			});	
		};


	});
</script>

</body>
</html>
